<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			.clock{
				position: relative;
				width: 500px;
				height: 500px;
				/*border: 10px solid black;*/
				border-radius: 50%;
				margin: 100px auto;
				background-image: url("./img/bg4.png");
				background-size: cover;
			}
			
			.clock>div{
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
			}
			
			/*设置时针*/
			.hour-wrapper{
				width: 60%;
				height: 60%;
				/*background-color: #bfa;*/
				animation:  run 72000s linear infinite;
			}
			
			.hour{
				height: 50%;
				width: 6px;
				background-color: black;
				margin: 0 auto;
			}
			
			/*设置分针*/
			.min-wrapper{
				width: 70%;
				height: 70%;
				/*background-color: #bfa;*/
				animation:  run 3600s steps(60) infinite;
			}
			
			.min{
				height: 50%;
				width: 4px;
				background-color: black;
				margin: 0 auto;
			}
			
			/*设置秒针*/
			.sec-wrapper{
				width: 80%;
				height: 80%;
				/*background-color: #bfa;*/
				animation: run 60s steps(60) infinite;
			}
			
			.sec{
				height: 50%;
				width: 2px;
				background-color: red;
				margin: 0 auto;
			}
			
			
			@keyframes run{
				from{
					transform: rotateZ(0);
				}
				to{
					transform: rotateZ(360deg);
				}
			}
		</style>
	</head>
	<body>
		<div class="clock">
			<!--时针-->
			<div class="hour-wrapper">
				<div class="hour"></div>
			</div>
			
			<!--分针-->
			<div class="min-wrapper">
				<div class="min"></div>
			</div>
			
			<!--秒针-->
			<div class="sec-wrapper">
				<div class="sec"></div>
			</div>
		</div>
	</body>
</html>
